<template>
  <div>
    <div class="app-container">
      <el-card
        shadow="never"
        class="order-box"
      >
        <template #header>订单详情</template>
        <el-row
          :gutter="24"
          justify="center"
        >
          <el-col
            :span="6"
            class="order-info"
          >
            <div class="ddbh">
              订单编号：
              <label>{{ orderDetailList.orderId }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="Waybill-info"
          >
            <div class="ydbh">
              运单编号：
              <label>{{ orderDetailList.transportOrderId || '--' }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="ordertime"
          >
            <div class="xdsj">
              下单时间：
              <label>{{ orderDetailList.createTime || '--' }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="orderstatus"
            style="width:200px"
          >
            <div class="ddzt">
              订单状态：
              <label v-if="orderDetailList.status == ' 23000'">待取件</label>
              <label v-else-if="orderDetailList.status == '23001'">已取件</label>
              <label v-else-if="orderDetailList.status == '23003'">网点入库</label>
              <label v-else-if="orderDetailList.status == '23005'">运输中</label>
              <label v-else-if="orderDetailList.status == '23004'">待装车</label>
              <label v-else-if="orderDetailList.status == '23006'">网点出库</label>
              <label v-else-if="orderDetailList.status == '23007'">待派送</label>
              <label v-else-if="orderDetailList.status == '23008'">派送中</label>
              <label v-else-if="orderDetailList.status == '23009'">已签收</label>
              <label v-else-if="orderDetailList.status == '23010'">拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="yjddrq" style="width:400px">
              预计到达日期：
              <label>{{ orderDetailList.estimatedArrivalTime || '--' }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-collapse v-model="activeNames" style="margin-bottom:20px">
        <el-collapse-item name="1">
          <template slot="title">
            <h2 class="collapse-title">基本信息</h2>
          </template>
          <div class="block">
            <el-timeline>
              <div>
                <span>发货方</span>
              </div>
              <div class="shipper">
                <div>
                  <div class="common-css">
                    发货方姓名：
                    <span>{{ orderDetailList.senderName }}</span>
                  </div>
                  <div class="common-css">
                    发货方地址：
                    <span>{{
                      orderDetailList.senderProvince +
                        orderDetailList.senderCity +
                        orderDetailList.senderCounty
                    }}</span>
                  </div>
                </div>
                <div>
                  <div class="common-css">
                    发货方电话：
                    <span>{{ orderDetailList.senderPhone }}</span>
                  </div>
                  <div class="common-css">
                    详细地址：
                    <span>{{ orderDetailList.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div>
                <span>收货方</span>
              </div>
              <div class="receiver">
                <div>
                  <div class="common-css">
                    收货方姓名：
                    <span>{{ orderDetailList.receiverName }}</span>
                  </div>
                  <div class="common-css">
                    收货方地址：
                    <span>{{
                      orderDetailList.receiverProvince +
                        orderDetailList.receiverCity +
                        orderDetailList.receiverCounty
                    }}</span>
                  </div>
                </div>
                <div>
                  <div class="common-css">
                    收货方电话：
                    <span>{{ orderDetailList.receiverPhone }}</span>
                  </div>
                  <div class="common-css">
                    详细地址：
                    <span>{{ orderDetailList.receiverAddress }}</span>
                  </div>
                </div>
              </div>
              <div class="distance">
                <span>距离：</span>
                <span
                  v-html="juli"
                />
              </div>
              <!-- 备注 -->
              <div>
                <span>备注：</span>
                <span>
                  <!-- 如果没有数据显示暂无 -->
                  {{ orderDetailList.remark ? orderDetailList.remark : '暂无' }}
                </span>
              </div></el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单跟踪 -->
      <el-collapse
        v-if="this.$route.query.transportOrderId"
        v-model="activeNames"
        class="order-collapse"
        style="margin-bottom:20px"
      >
        <el-collapse-item name="2">
          <template slot="title">
            <h2 class="collapse-detail" style="padding-left:20px">订单跟踪</h2>
          </template>
          <el-scrollbar
            scroll-x
            class="order-scroll"
          >
            <div class="logistics-orderInfo">
              <div
                v-for="(item, index) in logisticsInfo"
                :key="index"
                class="logistics-orderInfo-item"
                :class="[index === 0 ? 'active' : '']"
              >
                <div class="logistics-orderInfo-left">
                  <div
                    v-if="['已拒收', '已签收', '已取件'].includes(item.status)"
                    class="circle gray"
                  >
                    {{
                      item.status === '已拒收'
                        ? '拒'
                        : item.status === '已签收'
                          ? '签'
                          : '取'
                    }}
                  </div>

                  <div
                    v-else-if="
                      (index === 0 &&
                        ['运送中', '派送中'].includes(item.status)) ||
                        (index > 0 &&
                          logisticsInfo[index - 1].status !== '运送中')
                    "
                    class="circle gray"
                  >
                    <img
                      v-if="item.status === '派送中'"
                      src="../../../assets/paisong.png"
                    >
                    <img
                      v-else
                      src="../../../assets/yunshuzhong.png"
                    >
                  </div>

                  <div
                    v-else-if="
                      index > 0 && logisticsInfo[index - 1].status === '运送中'
                    "
                    class="circle gray"
                  >
                    <img
                      v-if="item.status === '派送中'"
                      src="../../../assets/paisong.png"
                    >
                    <img
                      v-else
                      src="../../../assets/yunshuzhong.png"
                    >
                  </div>
                  <div
                    v-if="index !== 0"
                    class="line"
                    :class="item.status === '运送中' ? 'short' : ''"
                  />
                </div>
                <div class="logistics-orderInfo-right">
                  <div class="status">
                    {{ item.status }}
                  </div>
                  <div class="time">{{ item.created }}</div>
                  <div
                    class="desc"
                    :class="
                      index === 0 || item.status === 23010 ? 'active' : ''
                    "
                  >{{ item.info }}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单轨迹 -->
      <el-collapse v-model="activeNames" style="margin-bottom:20px">
        <el-collapse-item name="3">
          <template slot="title">
            <h2 class="collapse-title">订单轨迹</h2>
          </template>
          <div ref="content" />
          <template>
            <baidu-map
              :center="center"
              :zoom="zoom"
              class="bm-view"
              inertial-dragging
              :scroll-wheel-zoom="true"
            />
          </template>
          <div />
        </el-collapse-item>
      </el-collapse>
      <!-- 取件信息 -->
      <el-collapse
        v-model="activeNames"
        class="pickup"
        style="margin-bottom:20px"
      >
        <el-collapse-item name="4">
          <template slot="title">
            <h2 class="collapse-title" style="padding-left:20px">取件信息</h2>
          </template>
          <el-row
            :gutter="24"
            justify="center"
            style="padding-left:40px;margin-bottom:20px"
          >
            <el-col :span="6">
              <div class="szwd">
                所在网点：
                <label>{{ orderDetailList.agencyName }}</label>
              </div> </el-col>·
            <el-col
              :span="6"
              class="pickup-type"
            >
              <div class="qjlx">
                取件类型：
                <label>{{ orderDetailList.pickupType }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="zyzt">
                作业状态：
                <label>{{ orderDetailList.zystatus }}</label>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="qjkdy">
                取件快递员：
                <label>{{ orderDetailList.courierName }}</label>
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="18"
            justify="center"
            style="padding-left:40px"
          >
            <el-col :span="6">
              <div class="kdydh">
                快递员电话：
                <label>{{ orderDetailList.courierMobile }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type-time"
            >
              <div class="yjqjrq">
                预计取件时间：
                <label>{{ orderDetailList.estimatedStartTime }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="Pickup-completed-time"
            >
              <div class="qjwcsj">
                取件完成时间：
                <label>{{ orderDetailList.actualEndTime }}</label>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 派送信息 -->
      <el-collapse
        v-if="orderDetailList.taskDispatch"
        v-model="activeNames"
        class="delivery"
        style="margin-bottom:20px"
      >
        <el-collapse-item name="5">
          <template slot="title">
            <h2 class="collapse-detail" style="padding-left:20px">派送信息</h2>
          </template>
          <el-row
            :gutter="20"
            justify="center"
            style="padding-left:40px;margin-bottom:20px"
          >
            <el-col
              :span="6"
            >
              <div class="szwd">
                所在网点：
                <label>{{ orderDetailList.psagencyName || '--' }}</label>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="pszyzt">
                作业状态：
                <label>{{ orderDetailList.pszystatus || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="pskdy">
                派送快递员：
                <label>{{ orderDetailList.pscourierName || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="kdydh">
                快递员电话：
                <label>{{ orderDetailList.pscourierMobile || '--' }}</label>
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            justify="center"
            style="padding-left:40px"
          >
            <el-col :span="6">
              <div class="yjqjrq">
                预计派送时间：
                <label>{{ orderDetailList.psestimatedStartTime || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qjwcsj">
                派件完成时间：
                <label>{{ orderDetailList.psactualEndTime || '--' }}</label>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 拒收派件信息 -->
      <el-collapse
        v-if="orderDetailList.taskRejectionDispatch"
        v-model="activeNames"
        class="rejection-delivery"
      >
        <el-collapse-item name="6">
          <template slot="title">
            <div class="collapse-detail">拒收派件信息</div>
          </template>
          <el-row
            :gutter="20"
            justify="center"
          >
            <el-col :span="6">
              <div class="szwd">
                所在网点：
                <label>{{
                  orderDetailList.taskRejectionDispatchAgencyName || '--'
                }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="zyzt">
                作业状态：
                <label>{{ orderDetailList.jsstatus || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qjkdy">
                派件快递员：
                <label>{{ orderDetailList.jscourierName || '--' }}</label>
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            justify="center"
          >
            <el-col :span="6">
              <div class="kdydh">
                快递员电话：
                <label>{{ orderDetailList.jscourierMobile || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="yjqjrq">
                预计取件时间：
                <label>{{ orderDetailList.jsestimatedStartTime || '--' }}</label>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="qjwcsj">
                取件完成时间：
                <label>{{ orderDetailList.jsactualEndTime || '--' }}</label>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="activeNames" style="margin-bottom:20px">
        <el-collapse-item name="7">
          <template slot="title">
            <h2 class="collapse-title">费用信息</h2>
          </template>
          <div style="margin-left:20px;display:flex">
            <div style="margin:20px">
              运费：
              <span class="cost">{{ orderDetailList.amount }}</span><span>元</span>
            </div>
            <div style="margin:20px">
              支付方式：
              <span>{{
                orderDetailList.paymentMethod === 1 ? '预结' : '到付'
              }}</span>
            </div>
            <div style="margin:20px">
              付款状态：
              <span>{{
                orderDetailList.paymentStatus === 1 ? '未付' : '已付'
              }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="8">
          <template slot="title">
            <h2 class="collapse-title">货品信息</h2>
          </template>
          <el-button
            v-if="pickupType == 1"
            class="add-goods"
            @click="handleAdd"
          >+新增</el-button>
          <div style="box-sizing: border-box;padding:20px">
            <el-table
              :data="propTableData.col"
              style="width: 100%"
              stripe
              :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
              show-summary
            >
              <el-table-column
                label="序号"
                type="index"
                align="left"
                width="60"
              />
              <el-table-column label="货品名称">
                <template slot-scope="scope">
                  <span v-if="scope.row.isSet">
                    <el-input
                      v-model="scope.row.name"
                      clearable
                      size="mini"
                      placeholder="请输入"
                    />
                  </span>
                  <span v-else>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="货品类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.isSet">
                    <el-select
                      v-model="scope.row.goodsType"
                      value-key="id"
                      placeholder="请选择"
                      style="width: 100px outline:none"
                      clearable
                      size="mini"
                    >
                      <el-option
                        v-for="item in hpOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                      />
                    </el-select>
                  </span>
                  <span v-if="!scope.row.isSet && scope.row.goodsType">
                    <span>{{ scope.row.goodsType.name }}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="重量（千克）"
                prop="totalWeight"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isSet">
                    <el-input
                      v-model="scope.row.totalWeight"
                      clearable
                      size="mini"
                      placeholder="请输入"
                    />
                  </span>
                  <span v-else>{{ scope.row.totalWeight }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="体积（立方）"
                prop="totalVolume"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isSet">
                    <el-input
                      v-model="scope.row.totalVolume"
                      clearable
                      size="mini"
                      placeholder="请输入"
                    />
                  </span>
                  <span v-else>{{ scope.row.totalVolume }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                width="170px"
              >
                <template slot-scope="scope">
                  <el-link
                    v-if="!scope.row.isSet"
                    :underline="false"
                    size="mini"
                    type="primary"
                    round
                    plain
                    @click="valChange(scope.row, scope.$index, true)"
                  >编辑</el-link>
                  <el-link
                    v-else
                    :underline="false"
                    size="mini"
                    type="primary"
                    round
                    plain
                    @click="valChange(scope.row, scope.$index, true)"
                  >保存</el-link>
                  <el-link
                    v-if="!scope.row.isSet"
                    :underline="false"
                    size="mini"
                    type="danger"
                    round
                    plain
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                    <el-divider direction="vertical" />删除
                  </el-link>
                  <el-link
                    v-else
                    :underline="false"
                    size="mini"
                    type="danger"
                    round
                    plain
                    @click="valChange(scope.row, scope.$index, false)"
                  >
                    <el-divider direction="vertical" />取消
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { getOrderDetail, getCarGoList, carGoEdit, carGoAdd, getGoodsType } from '@/api/order'
export default {
  name: 'Editorder',
  data() {
    return {
      center: {},
      zoom: 9,
      name: '1',
      juli: '',
      disabledAmount: true,
      disabledPaymentMethod: true,
      disabledPaymentStatus: true,
      requestParameters: {
        orderId: ''
      },
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        startLat: '',
        startLng: '',
        endLat: '',
        endLng: ''
      },
      hpOptions: [],
      // 支付方式
      paymentMethodOptions: [
        {
          id: 1,
          name: '预结'
        },
        {
          id: 2,
          name: '到付'
        }
      ],
      // 付款状态
      paymentStatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      // 订单详情
      orderDetailList: {
        orderId: '',
        transportOrderId: '',
        createTime: '',
        status: '',
        mark: '',
        senderName: '',
        senderPhone: '',
        senderAddress: '',
        receiverName: '',
        receiverPhone: '',
        receiverAddress: '',
        paymentMethod: '',
        paymentStatus: '',
        goodsTypeId: '',
        goodsTypeName: '',
        receiverProvince: '',
        receiverCity: '',
        receiverCounty: '',
        senderProvince: '',
        senderCity: '',
        senderCounty: '',
        amount: '',
        agencyName: '',
        courierName: '',
        courierMobile: '',
        estimatedStartTime: '',
        actualEndTime: '',
        pickupType: '',
        zystatus: '',
        estimatedArrivalTime: ''
      },
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      zyzt: '网点自寄',
      input3: '',
      propTableData: {
        sel: null,
        col: []
      },
      senderAreaName: '', // 始发地名称
      receiverAreaName: '', // 目的地名称
      logisticsInfo: ''
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    console.log(this.orderId)
    this.pickupType = this.$route.query.status
    if (this.pickupType === 1) {
      this.disabledAmount = false
      this.disabledPaymentMethod = false
      this.disabledPaymentStatus = false
    } else {
      this.disabledAmount = true
      this.disabledPaymentMethod = true
      this.disabledPaymentStatus = true
    }
    this.getList(this.orderId)
    this.getCarGoList(this.orderId)
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    // mapReady({ BMap, map }) {
    //   var geolocation = new BMap.Geolocation()
    //   geolocation.getCurrentPosition(
    //     (r) => {
    //       this.center = {
    //         lng: this.currentNode.longitude,
    //         lat: this.currentNode.latitude
    //       }
    //     },
    //     { enableHighAccuracy: true }
    //   )
    // },
    async getList(orderId) {
      const result = await getOrderDetail(orderId)
      console.log(result)
      this.senderAreaName = result.senderCity.name
      this.receiverAreaName = result.receiverCity.name
      this.$nextTick(() => {
        this.logisticsInfo =
        result.transportOrderPointVOS == null
          ? []
          : result.transportOrderPointVOS.reverse()
      })
      this.orderDetailList.orderId = result.id
      this.orderDetailList.createTime = result.createTime
      this.orderDetailList.estimatedArrivalTime = result.estimatedArrivalTime
      this.orderDetailList.status = result.status
      this.orderDetailList.senderName = result.senderName
      this.orderDetailList.senderPhone = result.senderPhone
      this.orderDetailList.senderAddress = result.senderAddress
      this.orderDetailList.receiverName = result.receiverName
      this.orderDetailList.receiverPhone = result.receiverPhone
      this.orderDetailList.receiverAddress = result.receiverAddress
      this.orderDetailList.paymentMethod = result.paymentMethod
      this.orderDetailList.paymentStatus = result.paymentStatus
      this.orderDetailList.mark = result.mark
      if (result.receiverProvince != null) {
        this.orderDetailList.receiverProvince = result.receiverProvince.name
      }
      // eslint-disable-next-line eqeqeq
      if (result.pickupType == 1) {
        this.orderDetailList.pickupType = '网点自寄'
      } else {
        this.orderDetailList.pickupType = '上门取件'
      }
      if (result.receiverCity != null) {
        this.orderDetailList.receiverCity = result.receiverCity.name
      }
      if (result.receiverCounty != null) {
        this.orderDetailList.receiverCounty = result.receiverCounty.name
      }
      this.orderDetailList.amount = result.amount
      if (result.senderProvince != null) {
        this.orderDetailList.senderProvince = result.senderProvince.name
      }
      if (result.receiverCity != null) {
        this.orderDetailList.senderCity = result.senderCity.name
      }
      if (result.receiverCounty != null) {
        this.orderDetailList.senderCounty = result.senderCounty.name
      }
      if (result.taskPickup != null && result.taskPickup.agency != null) {
        this.orderDetailList.agencyName = result.taskPickup.agency.name
      }
      if (result.taskPickup != null && result.taskPickup.courier != null) {
        this.orderDetailList.courierName = result.taskPickup.courier.name
      }
      if (result.taskPickup != null && result.taskPickup.courier != null) {
        this.orderDetailList.courierMobile = result.taskPickup.courier.mobile
      }
      if (result.taskPickup != null) {
        this.orderDetailList.estimatedStartTime = result.taskPickup.estimatedStartTime
      }
      if (result.taskPickup != null) {
        this.orderDetailList.actualEndTime = result.taskPickup.actualEndTime
      }
      if (result.transportOrder != null) {
        this.orderDetailList.transportOrderId = result.transportOrder.id
      }
      // 派送信息
      if (result.taskDispatch !== null) {
        this.orderDetailList.taskDispatch = { ...result.taskDispatch }
        if (result.taskDispatch.agency !== null) {
          this.orderDetailList.psagencyName = result.taskDispatch.agency.name
        }
        if (result.taskDispatch.courier !== null) {
          this.orderDetailList.pscourierName = result.taskDispatch.courier.name
          this.orderDetailList.pscourierMobile = result.taskDispatch.courier.mobile
        }
        if (result.taskDispatch && result.taskDispatch.status === 1) {
          this.orderDetailList.pszystatus = '新任务'
        } else if (result.taskDispatch && result.taskDispatch.status === 2) {
          this.orderDetailList.pszystatus = '已完成'
        } else if (result.taskDispatch && result.taskDispatch.status === 3) {
          this.orderDetailList.pszystatus = '已取消'
        }
        this.orderDetailList.psestimatedStartTime =
          result.taskDispatch.estimatedStartTime
        this.orderDetailList.psactualEndTime = result.taskDispatch.actualEndTime
      }
      //   拒收派件信息
      if (result.taskRejectionDispatch !== null) {
        if (result.taskRejectionDispatch.agency !== null) {
          this.orderDetailList.taskRejectionDispatchAgencyName =
                result.taskRejectionDispatch.agency.name
        }
        if (result.taskPickup.courier !== null) {
          this.orderDetailList.jscourierName =
                result.taskRejectionDispatch.courier.name
          this.orderDetailList.jscourierMobile =
                result.taskRejectionDispatch.courier.mobile
        }
        if (
          result.taskRejectionDispatch &&
              result.taskRejectionDispatch.status === 1
        ) {
          this.orderDetailList.jsstatus = '新任务'
        } else if (
          result.taskRejectionDispatch &&
              result.taskRejectionDispatch.status === 2
        ) {
          this.orderDetailList.jsstatus = '已完成'
        } else if (
          result.taskRejectionDispatch &&
              result.taskRejectionDispatch.status === 3
        ) {
          this.orderDetailList.jsstatus = '已取消'
        }
        this.orderDetailList.jsestimatedStartTime =
              result.taskRejectionDispatch.estimatedStartTime
        this.orderDetailList.jsactualEndTime =
              result.taskRejectionDispatch.actualEndTime
        this.orderDetailList.jspickupType = result.taskRejectionDispatch.pickupType
      }
      this.juli = result.distance + 'km'
      this.formData.startLat = result.senderCounty.lat
      this.formData.startLng = result.senderCounty.lng
      this.formData.endLat = result.receiverCounty.lat
      this.formData.endLng = result.receiverCounty.lng
      if (result.taskPickup != null) {
        if (result.taskPickup.status === 1) {
          this.orderDetailList.zystatus = '新任务'
        } else if (result.taskPickup.status === 2) {
          this.orderDetailList.zystatus = '已完成'
        } else if (result.taskPickup.status === 3) {
          this.orderDetailList.zystatus = '已取消'
        }
      }
    },
    async getCarGoList(orderId) {
      this.requestParameters.orderId = orderId
      const result = await getCarGoList(this.requestParameters)
      console.log(result)
      this.propTableData.col = result
      console.log(this.propTableData.col)
    }, // 编辑货品
    async valChange(row, index, qx) {
      this.goodsItemId = row.id
      // 点击修改，判断是否已经保存所有操作
      for (const i of this.propTableData.col) {
        // eslint-disable-next-line eqeqeq
        if (i.isSet && i.id != row.id) {
          this.Message('请先保存数据!', 'warning')
          return false
        }
      }
      // 是否是取消操作
      if (!qx) {
        if (!this.propTableData.sel.id) {
          this.propTableData.col.splice(index, 1)
        }
        // 重新回到编辑之前的数据状态
        this.getCarGoList(this.orderId)
        return (row.isSet = !row.isSet)
      }
      // 保存货品
      if (row.isSet) {
        const v = this.propTableData.sel
        v.order = {
          id: this.orderId
        }
        if (v.name === '') {
          this.Message('货品名称不能为空!', 'warning')
        } else {
          const {
            cargoBarcode,
            name,
            quantity,
            remark,
            totalVolume,
            totalWeight,
            goodsType,
            order
          } = this.propTableData.sel
          const params = {
            cargoBarcode,
            name,
            quantity,
            totalVolume,
            remark,
            totalWeight,
            goodsTypeId: goodsType.id,
            orderId: order.id
          }
          await (this.goodsItemId
            ? carGoEdit(params, this.goodsItemId)
            : carGoAdd(params)
          ).then(() => {
            this.goodsItemId = ''
            this.$emit('confirm', this.propTableData.sel)
          })
          row.isSet = false
          this.getCarGoList(this.orderId)
        }
      } else {
        this.$set(row, 'isSet', true)
        this.propTableData.sel = row
        const result = await getGoodsType()
        this.hpOptions = result.filter((obj) => obj.status === 1)
      }
    },
    // 删除货品
    async handleDelete(index, row) {
      this.$confirm('确定要删除货品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          this.change(row.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}

</script>

<style lang="scss" scoped>
.app-container{
    .order-box{
        margin-bottom: 20px;
        .el-col{
            margin-bottom: 20px;
            margin-left: 10px;
        }
         ::v-deep .el-card__header{
            font-size: 20px;
            font-weight: bold;
        }
        .ddbh{
            color:#20232a !important
        }
    }
    .el-collapse{
        .el-collapse-item{
            .collapse-title{
                padding:20px;
            }
            .block{
                .shipper{
                    margin-top: 0px;
                    margin-left: 40px;
                    margin-bottom: 20px;
                    display: flex;
                }
                .receiver{
                    margin-top: 0px;
                    margin-left: 40px;
                    margin-bottom: 20px;
                    display: flex;
                }
                .distance{
                    margin-bottom: 20px;
                }
            }
            .information{
                padding: 20px;
            }
        }
    }
    .common-css{
        font-size: 14px;
        font-weight: 400;
        margin-top: 10px;
        span {
            font-size: 14px;
            // font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            margin-right: 200px;
            color: rgba(129, 134, 147, 1);
        }
    }
    label{
        font-weight: normal;
    }
    .order-collapse {
      margin-top: 20px;
      .el-collapse-item__content {
      padding-bottom: 0px !important;
    }
  }
  .collapse-detail {
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: 700;
    color: #2a2929;
  }
  .logistics-orderInfo {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-bottom: 20px;
  .logistics-orderInfo-item.active {
    .logistics-orderInfo-left {
      .circle {
        background-color: #e63e32 !important;
      }
    }
  }
  .logistics-orderInfo-item {
    margin-right: 20px;
    .logistics-orderInfo-left {
      justify-content: center;
      width: 190px;
      display: flex;
      position: relative;
      .gray.circle {
        background-color: #818181;
      }
      .circle {
        position: relative;
        right: -10px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 26px;
        border-radius: 50%;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        img {
          width: 26px;
          height: 21px;
        }
      }
      .point {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #818181;
        margin-right: 20px;
      }
      .line {
        height: 1px;
        width: 180px;
        border-top: 1px dashed #dfdfdf;
        position: absolute;
        left: 125px;
        top: 20px;
      }
      .line.short {
        height: 60px;
      }
    }
      .logistics-orderInfo-right {
        margin-left: 10px;
        .status {
          font-size: 14px;
          color: #20232a;
          font-weight: normal;
          text-align: center;
          margin-top: 8px;
        }
        .time,
        .desc {
          color: #818181;
          width: 190px;
        }
        .desc {
          background-color: #f4f8fc;
          padding: 8px 15px;
          border-radius: 8px;
          color: #20232a;
          font-size: 14px;
        }
        .time {
          margin-bottom: 3px;
          color: #818693;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
}
.bm-view {
  width: 100%;
  height: 668px;
  overflow: hidden;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
</style>
